<template>
  <div class="course-file-iframe" >
    <pdf v-for="index in numPages" :key="index" :src="pdfUrl" :page="index" />
  </div>
</template>

<script>
import Pdf from "vue-pdf";

export default {
  components: {
    Pdf,
  },
  props: ["url"],
  data() {
    return {
      numPages: null,
      pdfUrl: "",
    };
  },
  mounted() {
    this.loadPdf();
  },
  methods: {
    // 上下滚动pdf加载
    loadPdf() {
      this.pdfUrl = Pdf.createLoadingTask(this.url);
      this.pdfUrl.promise.then((pdf) => {
        this.$nextTick(() => {
          this.numPages = pdf.numPages; // pdf总页数
        });
      });
    },
  },
};
</script>

<style scoped>
.course-file-iframe{
  width: 100%;
  height: 100%;
}
</style>